<template>
    <div class="form-coupon">

        <!--S未选择卡券时默认的样式-->
        <div id="default"
             v-if="value === ''"
             @click="showCouponSelector">
            <div class="content">
                <div class="icon">
                    <i class="iconfont icon-tianjia"></i>
                </div>
                点击选择卡券装入红包
            </div>
        </div>
        <!--E未选择卡券时默认的样式-->

        <!--S卡券-->
        <div id="coupon" v-if="value !== ''">
            <Coupon class="coupon"
                    :data="data"
            >
            </Coupon>
            <!--S删除-->
            <div class="remove" @click="$emit('confirm','')">
                <i class="iconfont icon-guanbi"></i>
            </div>
            <!--E删除-->
        </div>
        <!--E卡券-->

    </div>
</template>

<script>
// 卡券选择器form
import Coupon from "@c/coupon"
export default {
    name: "form-coupon",
    data() {
      return {
          data: {}
      }
    },
    model: {
      prop: 'value',
      event: 'confirm'
    },
    props: {
        value: {
            type: String,
            default: ""
        }
    },
    components: {
        Coupon
    },
    watch: {
      value() {
          if(this.value !== ''){
            this.get()
          }
        }
    },
    methods: {
        /**
         * 显示卡券选择器
         */
        showCouponSelector() {
            this.$createCoupon({
                is_show: new Date().getTime(),
                select: true,
                onConfirm: (res) => {
                    this.$emit("confirm",res)
                }
            })
        },
        /**
         * 获取卡券信息
         */
        get(){
            this.$get("coupon/get",{
                coupon_id: this.value
            })
                .then((res) => {
                    let {code, data} = res.data
                    if(code === 0) {
                        this.data = data
                    }
                })
        }
    }
}
</script>

<style scoped lang="less" src="./form-coupon.less"></style>
